<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var person = {
            firstName:"John",
            lastName:"Doe",
            age:50,
            eleColor:"blue",
            fullName : function()
            {
                return this.firstName + "-" + this.lastName;
            }
    };
    
        function myfunction() {
            document.getElementById("demo").innerHTML = person.firstName+" "+person.lastName+"现在"+person.age+"岁。";
            document.getElementById("demo2").innerHTML = person.fullName()+"现在"+person.age+"岁。";
            addElements(datas);
        }
        // function addOne();
        function addFun(){
            addElements(datas);
        }
        function delFun(obj){
            var tr = obj;
            tr.parentNode.removeChild(tr);
            // datas.splice(0,1);
            // addElements(datas);
        }
        function delecttr(obj){
            var tr = obj.parentNode.parentNode;
            tr.parentNode.removeChild(tr);
        }
        function modifyFun(obj){
            var tr = obj.parentNode.parentNode;
            tr.parentNode.removeChild(tr);

            addElements(datas2);

        }
    </script>
    <style>
         table {
            border-spacing: 0;
            width: 800px;
            text-align: center;
            margin: 0 auto;
            z-index: -999px;
        }
        thead td {
            border-bottom: 1px solid #999;
            padding-bottom: 5px;
            background-color: #eee;
        }

        tbody td {
            border-bottom: 1px solid #999;
            padding-bottom: 7px;
            padding-top: 7px;
        }

    </style>
</head>

<body>
    <button type="button" onclick="myfunction()">点我!</button>
    <div class="btn">
        <button id="add" onclick="addFun()">新增</button>
        <!-- <button id="modify" onclick="modifyFun()">修改</button>
        <button id="delete" onclick="delFun(this)">删除</button> -->
    </div>
    <!-- <script>
        document.write("<h1>这一个标题</h>");
    </script> -->

    <h1 id="demo">一个段落</h1>
    <h1 id="demo2">一个段落</h1>

    <table>
       
        <thead>
            <td> 序号 </td>
            <td> 名称 </td>
            <td> 性别 </td>
            <td> 项目 </td>
            <td> 成绩 </td>
        </thead>
        <tbody>

        </tbody>
    </table>
</body>
<script>
    var datas = [{
        index: 1,
        name:'张三',
        sex:'男',
        project:'大卡',
        mark:'99'
    },
    {
        index: 2,
        name:'李四',
        sex:'女',
        project:'保险',
        mark:'88'
    },
    {
        index: 3,
        name:'王五',
        sex:'男',
        project:'金融',
        mark:'77'
    }];

    var datas2 = [{
        index: 4,
        name:'888',
        sex:'男女',
        project:'🚗',
        mark:'100'
    }];
    //添加
    function addElements(data) {
        // deleteTbody();
        var tbody = document.querySelector('tbody');
        for (var i = 0; i < data.length; i++) {
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            // var td = document.createElement('td');
            // td.innerHTML = '<input type="checkbox">';
            // tr.appendChild(td);
            for (var k in data[i]) {
                var td = document.createElement('td');
                td.innerHTML = data[i][k];
                tr.appendChild(td);
            }
            var tdobj = document.createElement("td");
            tdobj.innerHTML="<input type='button' value='删除' onclick=delecttr(this)>";
            tr.appendChild(tdobj);

            var tdobj = document.createElement("td");
            tdobj.innerHTML="<input type='button' value='修改' onclick=modifyFun(this)>";
            tr.appendChild(tdobj);

        }

    }


</script>

</html>